<template>
	<view class="center">
		<u-navbar :background="background" back-icon-color="#FFFFFF"></u-navbar>
		<view class="content">
			<view class="goods-top">
				<view class="title">已完成</view>
				<view class="title-text">订单已完成，祝您购物愉快</view>
			</view>
			<!-- 地址信息 -->
			<view class="address-item">
				<image :src="imgBaseUrl + '/ache/images/position.png'" class="img"></image>
				<view class="address">
					<view class="address-city">济南市槐荫区兴福寺路街道 中泽大厦19 楼 龙池技术中心</view>
					<view class="address-user">
						<view class="address-name">张小斐</view>
						<view class="address-phone">15098654233</view>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-center">
				<view class="title">
					<image class="img" :src="imgBaseUrl + '/ache/images/logoicon.png'" mode="aspectFit"></image>
					<text>店铺: 百疼痛管理店</text>
				</view>
				<!-- 订单item -->
				<view class="goods-item">
					<view class="goods-info">
						<image class="img" :src="imgBaseUrl + '/ache/images/logoicon.png'"></image>
						<view class="goods-details">
							<view class="goods-title">悄红颜紧致提拉精华液</view>
							<view class="goods-Spec">150g/瓶</view>
							<view class="goods-Price">
								<view class="Price">￥29.90</view>
								<view class="quantity">X 2</view>
							</view>
						</view>
					</view>
				</view>
				<view class="allgoods">
					<view class="title">运费</view>
					<view class="price">￥0</view>
				</view>
				<view class="allgoods">
					<view class="title">商品金额</view>
					<view class="price">￥74.80</view>
				</view>
			</view>
			<!-- 订单详情 -->
			<view class="goods-details">
				<view class="goods-text">
					<view class="title">订单备注</view>
					<view class="text">槐荫区兴福寺路街道 中槐荫路街道 中泽大厦19 楼 龙池技术中</view>
				</view>
				<view class="goods-number">
					<view class="title">订单编号</view>
					<view class="item">
						<view class="text">202204150036</view>
						<view class="copy" @click="oncopy">复制</view>
					</view>
				</view>
				<view class="goods-number">
					<view class="title">下单时间</view>
					<view class="item"><view class="text">2022-04-15 15:06:36</view></view>
				</view>
			</view>

			<view class="bottom-button">
				<view class="box"><view class="again" @click="onagain">删除订单</view></view>
				<view class="box"><view class="again" @click="onagain">再次购买</view></view>
				<view class="box"><view class="gohome" @click="ongohome">返回首页</view></view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			background: {
				backgroundColor: '#F53942'
			}
		};
	},

	computed: {
		...mapGetters(['imgBaseUrl'])
	},
	methods: {
		onagain() {
			console.log('点击了再次购买');
		},
		ongohome() {
			uni.switchTab({
				url: '/pages/index/index'
			});
			console.log('跳转首页');
		},
		//点击复制
		oncopy() {
			uni.setClipboardData({
				data: '123132132131',
				success: () => {
					this.$message('已复制到黏贴板');
				}
			});
		}
	}
};
</script>

<style lang="scss">
@import '@/styles/mixin.scss';
.center {
	min-height: 100%;
	background-color: #f5f5f5;
	.goods-top {
		height: 175rpx;
		background: #f53942;
		text-align: center;
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #ffffff;
		}
		.title-text {
			padding-top: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}
	.address-item {
		margin: 20rpx;
		margin-top: -50rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		.img {
			padding-top: 20rpx;
			width: 51rpx;
			height: 51rpx;
		}
		.address {
			padding-left: 20rpx;
			.address-user {
				display: flex;
				padding-top: 10rpx;
				.address-name {
					font-size: 26rpx;
					font-weight: 400;
					color: #888888;
				}
				.address-phone {
					padding-left: 50rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #888888;
				}
			}
			.address-city {
				font-size: 26rpx;
				font-weight: bold;
				color: #222222;
			}
		}
	}
	.goods-center {
		padding: 20rpx;
		margin-top: 20rpx;
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		.title {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			font-weight: bold;
			@include border-bottom-1px(#ececec);

			.img {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				background-color: #f5f5f5;
			}
		}
		.allgoods {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: baseline;
			justify-content: space-between;
			.title {
				font-weight: 400;
				font-size: 26rpx;
				color: #222222;
			}
			.price {
				font-size: 28rpx;
				font-weight: bold;
				color: #222222;
			}
		}
		.goods-item {
			padding-top: 20rpx;
			// border-bottom: 1rpx solid  #888888;
			overflow: hidden;
			.goods-info {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				.img {
					display: flex;
					height: 175rpx;
					width: 150rpx;
				}
				.goods-details {
					width: 676rpx;
					.goods-title {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						padding: 10rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}
					.goods-Spec {
						padding: 10rpx;
						display: inline-block;
						font-size: 20rpx;
						color: #888888;
						background-color: #f6f6f6;
						border-radius: 5rpx;
					}
					.goods-Price {
						padding: 10rpx;
						width: 100%;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
					}
					.Price {
						color: #f53942;
						font-size: 30rpx;
						font-weight: bold;
					}
					.quantity {
						font-size: 26rpx;
						font-weight: 500;
						color: #888888;
						padding-right: 24rpx;
					}
				}
			}
		}
	}
	.goods-details {
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
		.goods-text {
			padding: 10rpx;

			.title {
				color: #222222;
				font-size: 24rpx;
				font-weight: 400;
			}
			.text {
				padding: 10rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
			}
		}
		.goods-number {
			padding: 10rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;

			.title {
				color: #222222;
				font-size: 24rpx;
				font-weight: 400;
			}
			.item {
				display: flex;
				align-items: baseline;
				.text {
					padding-left: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #888888;
				}
				.copy {
					padding: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #222222;
				}
			}
		}
	}
	.bottom-button {
		height: 100rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		padding: 10rpx;
		background: #ffffff;
		padding: 20rpx;
		.box {
			.again {
				padding: 8rpx;
				width: 152rpx;
				height: 51rpx;
				background: #ffffff;
				border: 1rpx solid #888888;
				border-radius: 25rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
			}
		}
		.box {
			padding-left: 40rpx;
			.gohome {
				padding: 8rpx;
				width: 152rpx;
				height: 51rpx;
				background: #ffffff;
				border: 1rpx solid #f53942;
				border-radius: 25rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #f53942;
			}
		}
	}
}
</style>
